<template>
  <a-modal
    :visible="visible"
    title="新增阶梯费率"
    okText="新增"
    @cancel="() => { $emit('cancel') }"
    @ok="() => { $emit('create') }"
  >
    <a-form :form="form">
      <a-form-item
        label="最低金额"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-input-number
          :min="0"
          placeholder="最低金额"
          style="width: 100%;"
          :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{4})+(?!\d))/g, ' ')"
          :parser="value => value.replace(/￥\s?|( *)/g, '')"
          v-decorator="[
            'amountLow',
            {rules: [{ required: true, message: '请输入最低金额' }, { type: 'number', min: 0, message: '金额不小于0'}]}
          ]"
        />
      </a-form-item>
      <a-form-item
        label="最高金额"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-input-number
          :min="0"
          placeholder="最高金额"
          style="width: 100%;"
          :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{4})+(?!\d))/g, ' ')"
          :parser="value => value.replace(/￥\s?|( *)/g, '')"
          v-decorator="[
            'amountHigh',
            {rules: [{ required: true, message: '请输入最高金额' }, { validator: this.checkMinMax }]}
          ]"
        />
      </a-form-item>
      <a-form-item
        label="服务费率"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-input-number
          :min="1"
          :max="20"
          :step="1"
          :formatter="value => `${value}%`"
          :parser="value => value.replace('%', '')"
          placeholder="服务费率"
          style="width: 100%;"
          v-decorator="[
            'feeRate',
            {rules: [{ required: true, message: '请输入服务费率' }]}
          ]"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'form_in_modal' })
  },
  methods: {
    checkMinMax (rule, value, callback, source, options) {
      if (value <= this.form.getFieldValue('amountLow')) {
        callback(new Error('不应低于最低金额'))
      } else {
        callback()
      }
    }
  }
}
</script>
